﻿@{
    ViewBag.Title = "邮件详情";
}

@section Style{
    @Styles.Render("~/Content/Flat/Css/inbox")
}

@section Script{
    @Scripts.Render("~/Content/Flat/Js/inbox")
}
<!--main content start-->
<section id="main-content">
    <section class="wrapper">
        <!--mail inbox start-->
        <div class="mail-box">
            <aside class="sm-side">
                <div class="user-head">
                    <a href="javascript:;" class="inbox-avatar">
                        <img src="/Content/Flat/img/mail-avatar.jpg" alt="">
                    </a>
                    <div class="user-name">
                        <h5><a href="#">史密斯</a></h5>
                        <span><a href="#">service@jucheap.com</a></span>
                    </div>
                    <a href="javascript:;" class="mail-dropdown pull-right">
                        <i class="fa fa-chevron-down"></i>
                    </a>
                </div>
                <div class="inbox-body">
                    <a class="btn btn-compose" data-toggle="modal" href="#myModal">
                        回复
                    </a>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title">Compose</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal" role="form">
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">收件人</label>
                                            <div class="col-lg-10">
                                                <input type="text" class="form-control" id="inputEmail1" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">抄送</label>
                                            <div class="col-lg-10">
                                                <input type="text" class="form-control" id="cc" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">主题</label>
                                            <div class="col-lg-10">
                                                <input type="text" class="form-control" id="inputPassword1" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-lg-2 control-label">内容</label>
                                            <div class="col-lg-10">
                                                <textarea name="" id="" class="form-control" cols="30" rows="10"></textarea>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-lg-offset-2 col-lg-10">
                                                <span class="btn green fileinput-button">
                                                    <i class="fa fa-plus fa fa-white"></i>
                                                    <span>附件</span>
                                                    <input type="file" multiple="" name="files[]">
                                                </span>
                                                <button type="submit" class="btn btn-send">发送</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
                <ul class="inbox-nav inbox-divider">
                    <li class="active">
                        <a href="#"><i class="fa fa-inbox"></i> 收件箱 <span class="label label-danger pull-right">2</span></a>

                    </li>
                    <li>
                        <a href="#"><i class="fa fa-envelope-o"></i> 发送邮件</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bookmark-o"></i> 重要邮件</a>
                    </li>
                    <li>
                        <a href="#"><i class=" fa fa-external-link"></i> 草稿 <span class="label label-info pull-right">30</span></a>
                    </li>
                    <li>
                        <a href="#"><i class=" fa fa-trash-o"></i> 垃圾邮件</a>
                    </li>
                </ul>
                <ul class="nav nav-pills nav-stacked labels-info inbox-divider">
                    <li> <h4>标签</h4> </li>
                    <li> <a href="#"> <i class=" fa fa-sign-blank text-danger"></i> 工作 </a> </li>
                    <li> <a href="#"> <i class=" fa fa-sign-blank text-success"></i> 设计 </a> </li>
                    <li> <a href="#"> <i class=" fa fa-sign-blank text-info "></i> 家人 </a>
                    <li> <a href="#"> <i class=" fa fa-sign-blank text-warning "></i> 朋友 </a>
                    <li>
                        <a href="#"> <i class=" fa fa-sign-blank text-primary "></i> 办公 </a>
                    </li>
                </ul>
                <ul class="nav nav-pills nav-stacked labels-info ">
                    <li> <h4>在线人员</h4> </li>
                    <li> <a href="#"> <i class=" fa fa-circle text-success"></i> 乔恩 <p>I do not think</p></a>  </li>
                    <li> <a href="#"> <i class=" fa fa-circle text-danger"></i> 山姆 <p>Busy with coding</p></a> </li>
                    <li> <a href="#"> <i class=" fa fa-circle text-muted "></i> 俏丽 <p>I out of control</p></a>
                    <li> <a href="#"> <i class=" fa fa-circle text-muted "></i> 史密斯 <p>I am not here</p></a>
                    <li>
                        <a href="#"> <i class=" fa fa-circle text-muted "></i> 塔夫卡 <p>I do not think</p></a>
                    </li>
                </ul>

                <div class="inbox-body text-center">
                    <div class="btn-group">
                        <a href="javascript:;" class="btn mini btn-primary">
                            <i class="fa fa-plus"></i>
                        </a>
                    </div>
                    <div class="btn-group">
                        <a href="javascript:;" class="btn mini btn-success">
                            <i class="fa fa-phone"></i>
                        </a>
                    </div>
                    <div class="btn-group">
                        <a href="javascript:;" class="btn mini btn-info">
                            <i class="fa fa-cog"></i>
                        </a>
                    </div>
                </div>

            </aside>
            <aside class="lg-side">
                <div class="inbox-head">
                    <h3>查看邮件</h3>
                    <form class="pull-right position" action="#">
                        <div class="input-append">
                            <input type="text" placeholder="搜索" class="sr-input">
                            <button type="button" class="btn sr-btn"><i class="fa fa-search"></i></button>
                        </div>
                    </form>
                </div>
                <div class="inbox-body">
                    <div class="heading-inbox row">
                        <div class="col-md-8">
                            <div class="compose-btn">
                                <a class="btn btn-sm btn-primary" href="#"><i class="fa fa-reply"></i> 回复</a>
                                <button title="" data-placement="top" data-toggle="tooltip" type="button" data-original-title="Print" class="btn  btn-sm tooltips"><i class="fa fa-print"></i> </button>
                                <button title="" data-placement="top" data-toggle="tooltip" data-original-title="Trash" class="btn btn-sm tooltips"><i class="fa fa-trash-o"></i></button>
                            </div>

                        </div>
                        <div class="col-md-4 text-right">
                            <p class="date"> 8:02 PM 12 FEB 2014</p>
                        </div>
                        <div class="col-md-12">
                            <h4> Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci. Donec ultrices faucibus rutrum.</h4>
                        </div>
                    </div>
                    <div class="sender-info">
                        <div class="row">
                            <div class="col-md-12">
                                <img alt="" src="/Content/Flat/img/mail-avatar.jpg">
                                <strong>黎明</strong>
                                <span>[liming@gmail.com]</span>
                                to
                                <strong>me</strong>
                                <a class="sender-dropdown " href="javascript:;">
                                    <i class="fa fa-chevron-down"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="view-mail">
                        <p>Faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci. Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci. Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci. </p>
                        <p>
                            Consequat risus. Mauris sed congue orci. Donec ultrices <a href="#">JuCheap</a>. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec
                            <a href="#">vitae leo at sem lobortis porttitor eu consequat risus</a>. Mauris sed congue orci. Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci.
                        </p>
                        <p>Modales vulputate urna, vel <a href="#">thevectorlab.net</a>. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci. Donec ultrices faucibus rutrum. Phasellus sodales vulputate urna, vel accumsan augue egestas ac. Donec vitae leo at sem lobortis porttitor eu consequat risus. Mauris sed congue orci. </p>
                    </div>
                    <div class="attachment-mail">
                        <p>
                            <span><i class="fa fa-paperclip"></i> 3 个附件 &mdash; </span>
                            <a href="#">下载附件</a>
                            |
                            <a href="#">查看所有图片</a>
                        </p>
                        <ul>
                            <li>
                                <a href="#" class="atch-thumb">
                                    <img src="/Content/Flat/img/pro-ac-1.png">
                                </a>

                                <div class="file-name">
                                    image-name.jpg
                                </div>
                                <span>12KB</span>


                                <div class="links">
                                    <a href="#">查看</a> -
                                    <a href="#">下载</a>
                                </div>
                            </li>

                            <li>
                                <a href="#" class="atch-thumb">
                                    <img src="/Content/Flat/img/pro-ac-2.png">
                                </a>

                                <div class="file-name">
                                    img_name.jpg
                                </div>
                                <span>40KB</span>

                                <div class="links">
                                    <a href="#">查看</a> -
                                    <a href="#">下载</a>
                                </div>
                            </li>
                            <li>
                                <a href="#" class="atch-thumb">
                                    <img src="/Content/Flat/img/pro-ac-1.png">
                                </a>

                                <div class="file-name">
                                    img_name.jpg
                                </div>
                                <span>30KB</span>

                                <div class="links">
                                    <a href="#">查看</a> -
                                    <a href="#">下载</a>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <div class="compose-btn pull-left">
                        <a class="btn btn-sm btn-primary" href="#"><i class="fa fa-reply"></i> 回复</a>
                        <button class="btn btn-sm "><i class="fa fa-arrow-right"></i> 转发</button>
                        <button title="" data-placement="top" data-toggle="tooltip" type="button" data-original-title="Print" class="btn  btn-sm tooltips"><i class="fa fa-print"></i> </button>
                        <button title="" data-placement="top" data-toggle="tooltip" data-original-title="Trash" class="btn btn-sm tooltips"><i class="fa fa-trash-o"></i></button>
                    </div>
                </div>
            </aside>
        </div>
        <!--mail inbox end-->
    </section>
</section>
<!--main content end-->